<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.gzsxt.cn/fucntions" prefix="myFn"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<base href="<%=basePath%>">

<link rel="stylesheet" type="text/css"
	href="resources/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="resources/easyui/themes/icon.css">

<script type="text/javascript" src="resources/easyui/jquery.min.js"></script>
<script type="text/javascript"
	src="resources/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="resources/easyui/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript">
$(function() {
	$("#myDataGrid1").datagrid({
		fit : true,
		title : '用户歌单收藏',
		fitColumns : true,
		url : 'userCollect/usList.do',
		method : 'post',
		pagination : true,
		toolbar : "#toolbar1",
		striped : true,
		singleSelect : true,
	}); 
	$("#myDataGrid2").datagrid({
		fit : true,
		title : '用户专辑收藏',
		fitColumns : true,
		url : 'userCollect/ucList.do',
		method : 'post',
		pagination : true,
		toolbar : "#toolbar2",
		striped : true,
		singleSelect : true,
	}); 
	$("#myDataGrid3").datagrid({
		fit : true,
		title : '用户歌手收藏',
		fitColumns : true,
		url : 'userCollect/usrList.do',
		method : 'post',
		pagination : true,
		toolbar : "#toolbar3",
		striped : true,
		singleSelect : true,
	}); 
	
	$("#myDialog1").dialog({
		width : 300,
		height : 200,
		left :70,
		buttons : "#dialogButtons1",
		closed : true,
	});
	
	$("#myDialog2").dialog({
		width : 300,
		height : 200,
		buttons : "#dialogButtons2",
		closed : true,
	});
	
	$("#myDialog3").dialog({
		width : 300,
		height : 200,
		left : 940,
		buttons : "#dialogButtons3",
		closed : true,
	});

	$("#cdComBobox").combobox({
		url:"userCollect/getAllCds.do",
		valueField:'id',    
	    textField:'text'
	}); 

	$("#singerComBobox").combobox({
		url:"userCollect/getAllSingers.do",
		valueField:'id',    
	    textField:'text'
	}); 

	
});

function formatterCreateDate(value, row, index) {
	var date = new Date(value);
	var y = date.getFullYear();
	var m = date.getMonth() + 1;
	var d = date.getDate();
	return y + '-' + m + '-' + d;
}

var cmdObj = {
		openDialog1 : function() {
			$("#myDialog1").dialog("open");
			$("#myDialog1").dialog("setTitle", "添加歌单收藏");
			$("#usListForm").form("clear");
		},
		openDialog2 : function() {
			$("#myDialog2").dialog("open");
			$("#myDialog2").dialog("setTitle", "添加专辑收藏");
			$("#ucListForm").form("clear");
		},
		openDialog3 : function() {
			$("#myDialog3").dialog("open");
			$("#myDialog3").dialog("setTitle", "添加收藏歌手");
			$("#usrListForm").form("clear");
		},
		saveOrUpdateUsList : function() {

			var usList_id = $("#usList_id").val();
			console.log(usList_id);
			var url = "";
			if (usList_id != "") {
				url = "userCollect/updateUsList.do"
			} else {
				url = "userCollect/addUsList.do";
			}

			$('#usListForm').form('submit', {
				url : url,
				success : function(data) {
					data = eval("(" + data + ")");
					if (data.code == 1) {
						$.messager.alert("温馨提示", data.msg, 'info');
						$("#myDialog1").dialog("close");
						$("#myDataGrid1").datagrid("reload");
					} else {
						$.messager.alert("温馨提示", data.msg, 'error');
					}

				}
			});
		},
		saveOrUpdateUcList : function() {

			var ucList_id = $("#ucList_id").val();

			var url = "";
			if (ucList_id != "") {
				url = "userCollect/updateUcList.do"
			} else {
				url = "userCollect/addUcList.do";
			}

			$('#ucListForm').form('submit', {
				url : url,
				success : function(data) {
					data = eval("(" + data + ")");
					if (data.code == 1) {
						$.messager.alert("温馨提示", data.msg, 'info');
						$("#myDialog2").dialog("close");
						$("#myDataGrid2").datagrid("reload");
					} else {
						$.messager.alert("温馨提示", data.msg, 'error');
					}

				}
			});
		},
		saveOrUpdateUsrList : function() {

			var usrList_id = $("#usrList_id").val();

			var url = "";
			if (usrList_id != "") {
				url = "userCollect/updateUsrList.do"
			} else {
				url = "userCollect/addUsrList.do";
			}

			$('#usrListForm').form('submit', {
				url : url,
				success : function(data) {
					data = eval("(" + data + ")");
					if (data.code == 1) {
						$.messager.alert("温馨提示", data.msg, 'info');
						$("#myDialog3").dialog("close");
						$("#myDataGrid3").datagrid("reload");
					} else {
						$.messager.alert("温馨提示", data.msg, 'error');
					}

				}
			});
		},
		delUsList : function() {
			var rowData = $("#myDataGrid1").datagrid("getSelected");
			if (rowData == null) {
				$.messager.alert("温馨提示", "请选择需要删除的行", 'warning');
				return;
			}
			$.messager.confirm('确认', '您确认要删除该记录吗？', function(r) {
				if (r) {
					var usList_id = rowData.usList_id;
					$.get("userCollect/deleteUsListById.do", {
						"usList_id" : usList_id
					}, function(data) {
						if (data.code == 1) {
							$.messager.alert("温馨提示", data.msg, 'info');
							$("#myDataGrid1").datagrid("reload");

						} else {
							$.messager.alert("温馨提示", data.msg, 'error');
						}
					});
				}
			});
		},
		delUcList : function() {
			var rowData = $("#myDataGrid2").datagrid("getSelected");
			if (rowData == null) {
				$.messager.alert("温馨提示", "请选择需要删除的行", 'warning');
				return;
			}
			$.messager.confirm('确认', '您确认要删除该记录吗？', function(r) {
				if (r) {
					var ucList_id = rowData.ucList_id;
					$.get("userCollect/deleteUcListById.do", {
						"ucList_id" : ucList_id
					}, function(data) {
						if (data.code == 1) {
							$.messager.alert("温馨提示", data.msg, 'info');
							$("#myDataGrid2").datagrid("reload");

						} else {
							$.messager.alert("温馨提示", data.msg, 'error');
						}
					});
				}
			});
		},
		delUsrList : function() {
			var rowData = $("#myDataGrid3").datagrid("getSelected");
			if (rowData == null) {
				$.messager.alert("温馨提示", "请选择需要删除的行", 'warning');
				return;
			}
			$.messager.confirm('确认', '您确认要删除该记录吗？', function(r) {
				if (r) {
					var usrList_id = rowData.usrList_id;
					$.get("userCollect/deleteUsrListById.do", {
						"usrList_id" : usrList_id
					}, function(data) {
						if (data.code == 1) {
							$.messager.alert("温馨提示", data.msg, 'info');
							$("#myDataGrid3").datagrid("reload");

						} else {
							$.messager.alert("温馨提示", data.msg, 'error');
						}
					});
				}
			});
		},
		editUsList : function() {
			var rowData = $("#myDataGrid1").datagrid("getSelected");
			if (rowData == null) {
				$.messager.alert("温馨提示", "请选择需要修改的数据", 'warning');
				return;
			}
			$("#usListForm").form("load", rowData);

			$("#myDialog1").dialog("open");
			$("#myDialog1").dialog("setTitle", "修改歌单收藏");

		},
		editUcList : function() {
			var rowData = $("#myDataGrid2").datagrid("getSelected");
			if (rowData == null) {
				$.messager.alert("温馨提示", "请选择需要修改的数据", 'warning');
				return;
			}
			$("#ucListForm").form("load", rowData);

			$("#myDialog2").dialog("open");
			$("#myDialog2").dialog("setTitle", "修改专辑收藏");

		},
		editUsrList : function() {
			var rowData = $("#myDataGrid3").datagrid("getSelected");
			if (rowData == null) {
				$.messager.alert("温馨提示", "请选择需要修改的数据", 'warning');
				return;
			}
			$("#usrListForm").form("load", rowData);

			$("#myDialog3").dialog("open");
			$("#myDialog3").dialog("setTitle", "修改收藏歌手");

		},
		closeDialog1 : function() {
			$("#myDialog1").dialog("close");
		},
		closeDialog2 : function() {
			$("#myDialog2").dialog("close");
		},
		closeDialog3 : function() {
			$("#myDialog3").dialog("close");
		},
		search:function(){
			$("#myDataGrid1").datagrid("load",{
				sname:$("#sname").val(),
				sdate:$("#sdate").datebox("getValue")
			}),
			$("#myDataGrid2").datagrid("load",{
				sname:$("#sname").val(),
				sdate:$("#sdate").datebox("getValue")
			}),
			$("#myDataGrid3").datagrid("load",{
				sname:$("#sname").val(),
				sdate:$("#sdate").datebox("getValue")
			})
		}
	}

</script>

<div id="myDialog1" class="easyui-dialog">
	<form id="usListForm" action="" method="post">
		<input type="hidden" id="usList_id" name="usList_id">
		<table style="margin-top: 10;" align="center">
			<tr>
				<td style="text-align: center;">用户名:
				<td>
				<td><input style="width: 150px; height: 30px;" name="user_name"
					class="easyui-validatebox" data-options="{required:true}"></td>
			</tr>
			<tr>
				<td style="text-align: center;">歌单名称:<td>
				<td>
					<input style="width: 150px; height: 30px;" name="songList_name"
					class="easyui-validatebox" data-options="{required:true}">
				</td>
			</tr>
			<tr>
				<td style="text-align: right;">收藏日期:
				<td>
				<td><input style="width: 150px; height: 30px;" id="usList_date"
					name="usList_date" type="text" class="easyui-datebox" data-options="{required:true}"></td>
			</tr>
		</table>
	</form>
</div>

<div id="myDialog2" class="easyui-dialog">
	<form id="ucListForm" action="" method="post">
		<input type="hidden" id="ucList_id" name="ucList_id">
		<table style="margin-top: 10;" align="center">
			<tr>
				<td style="text-align: center;">用户名:
				<td>
				<td><input style="width: 150px; height: 30px;" name="user_name"
					class="easyui-validatebox" data-options="{required:true}"></td>
			</tr>
			<tr>
				<td style="text-align: center;">专辑名称:<td>
				<td>
					<input id="cdComBobox" name="cd_id"  class="easyui-combobox" data-options="{required:true}">
				</td>
			</tr>
			<tr>
				<td style="text-align: right;">收藏日期:
				<td>
				<td><input style="width: 150px; height: 30px;" id="ucList_date"
					name="ucList_date" type="text" class="easyui-datebox" data-options="{required:true}"></td>
			</tr>
		</table>
	</form>
</div>

<div id="myDialog3" class="easyui-dialog">
	<form id="usrListForm" action="" method="post">
		<input type="hidden" id="usrList_id" name="usrList_id">
		<!-- <input type="hidden" id="user_id" name="user_id"> -->
		<table style="margin-top: 10;" align="center">
			<tr>
				<td style="text-align: center;">用户名:
				<td>
				<td><input style="width: 150px; height: 30px;" name="user_name"
					class="easyui-validatebox" data-options="{required:true}"></td>
			</tr>
			<tr>
				<td style="text-align: center;">歌手姓名:<td>
				<td>
					<input id="singerComBobox" name="singer_id"  class="easyui-combobox" data-options="{required:true}">
				</td>
			</tr>
			<tr>
				<td style="text-align: right;">收藏日期:
				<td>
				<td><input style="width: 150px; height: 30px;" id="usrList_date"
					name="usrList_date" type="text" class="easyui-datebox" data-options="{required:true}"></td>
			</tr>
		</table>
	</form>
</div>

<div id="dialogButtons1">
	<a onclick="cmdObj.saveOrUpdateUsList();" class="easyui-linkbutton"
		data-options="{iconCls:'icon-save',plain:true}">保存</a> <a
		onclick="cmdObj.closeDialog1();" class="easyui-linkbutton"
		data-options="{iconCls:'icon-cancel',plain:true}">取消</a>
</div>

<div id="dialogButtons2">
	<a onclick="cmdObj.saveOrUpdateUcList();" class="easyui-linkbutton"
		data-options="{iconCls:'icon-save',plain:true}">保存</a> <a
		onclick="cmdObj.closeDialog2();" class="easyui-linkbutton"
		data-options="{iconCls:'icon-cancel',plain:true}">取消</a>
</div>

<div id="dialogButtons3">
	<a onclick="cmdObj.saveOrUpdateUsrList();" class="easyui-linkbutton"
		data-options="{iconCls:'icon-save',plain:true}">保存</a> <a
		onclick="cmdObj.closeDialog3();" class="easyui-linkbutton"
		data-options="{iconCls:'icon-cancel',plain:true}">取消</a>
</div>

<div id="toolbar1">
	<div>
		<c:if test="${myFn:checkPermission('userCollect/addUsList.do')}">
		<a onclick="cmdObj.openDialog1();" class="easyui-linkbutton"
			data-options="iconCls:'icon-add',plain:true">添加</a>
	</c:if>
	<c:if test="${myFn:checkPermission('userCollect/updateUsList.do')}">
		<a onclick="cmdObj.editUsList();" class="easyui-linkbutton"
			data-options="{iconCls:'icon-edit',plain:true}">修改</a>
	</c:if>
	<c:if test="${myFn:checkPermission('userCollect/deleteUsListById.do')}">
		<a onclick="cmdObj.delUsList();" class="easyui-linkbutton"
			data-options="{iconCls:'icon-remove',plain:true}">删除</a>
	</c:if>
	</div>
</div>

<div id="toolbar2">
	<div>
		<c:if test="${myFn:checkPermission('userCollect/addUcList.do')}">
		<a onclick="cmdObj.openDialog2();" class="easyui-linkbutton"
			data-options="iconCls:'icon-add',plain:true">添加</a>
	</c:if>
	<c:if test="${myFn:checkPermission('userCollect/updateUcList.do')}">
		<a onclick="cmdObj.editUcList();" class="easyui-linkbutton"
			data-options="{iconCls:'icon-edit',plain:true}">修改</a>
	</c:if>
	<c:if test="${myFn:checkPermission('userCollect/deleteUcListById.do')}">
		<a onclick="cmdObj.delUcList();" class="easyui-linkbutton"
			data-options="{iconCls:'icon-remove',plain:true}">删除</a>
	</c:if>
	</div>
</div>

<div id="toolbar3">
	<div>
		<c:if test="${myFn:checkPermission('userCollect/addUsrList.do')}">
		<a onclick="cmdObj.openDialog3();" class="easyui-linkbutton"
			data-options="iconCls:'icon-add',plain:true">添加</a>
	</c:if>
	<c:if test="${myFn:checkPermission('userCollect/updateUsrList.do')}">
		<a onclick="cmdObj.editUsrList();" class="easyui-linkbutton"
			data-options="{iconCls:'icon-edit',plain:true}">修改</a>
	</c:if>
	<c:if test="${myFn:checkPermission('userCollect/deleteUsrListById.do')}">
		<a onclick="cmdObj.delUsrList();" class="easyui-linkbutton"
			data-options="{iconCls:'icon-remove',plain:true}">删除</a>
	</c:if>
	</div>
</div>

<table>
	<tr>
	<div>
		<label>请输入用户名:</label>
		<input style="width: 150px; height: 25px;" name="sname" id="sname">&nbsp;&nbsp;&nbsp;&nbsp;
		<label>收藏日期:</label>
		<input style="width: 100px; height: 30px;" id="sdate"
					name="sdate" type="text" class="easyui-datebox">&nbsp;&nbsp;&nbsp;
		<a onclick="cmdObj.search();" class="easyui-linkbutton"
			data-options="{iconCls:'icon-search'}">搜索</a>
	</div>
	<br>
	</tr>
	<hr>
	<tr>
		<td>
			<table id="myDataGrid1" style="width: 430px;height:480px;" class="easyui-datagrid">
				<thead>
						<th data-options="field:'usList_id',width:1">序号</th>
						<th data-options="field:'user_id',width:1">用户编号</th>
						<th data-options="field:'user_name',width:1">用户名</th>
						<th data-options="field:'songList_name',width:1">收藏歌单</th>
						<th data-options="field:'usList_date',width:1,formatter:formatterCreateDate">收藏日期</th>
				</thead>
			</table>
		</td>
			
		<td>
			<table id="myDataGrid2" style="width: 430px;height:480px;" class="easyui-datagrid">
				<thead>
					<th data-options="field:'ucList_id',width:1">序号</th>
					<th data-options="field:'user_id',width:1">用户编号</th>
					<th data-options="field:'user_name',width:1">用户名</th>
					<th data-options="field:'cd_name',width:1">收藏专辑</th>
					<th data-options="field:'ucList_date',width:1,formatter:formatterCreateDate">收藏日期</th>
				</thead>
			</table>
		</td>
		<td>
			<table id="myDataGrid3" style="width: 430px;height:480px;" class="easyui-datagrid">
				<thead>
					<th data-options="field:'usrList_id',width:1">序号</th>
					<th data-options="field:'user_id',width:1">用户编号</th>
					<th data-options="field:'user_name',width:1">用户名</th>
					<th data-options="field:'singer_name',width:1">收藏歌手</th>
					<th data-options="field:'usrList_date',width:1,formatter:formatterCreateDate">收藏日期</th>
				</thead>
			</table>
		</td>
	</tr>
</table>
